<template>
  <div ref="editorContainer"></div>
</template>

<script setup>
import {ref, onMounted, onUnmounted, watch} from 'vue';
import WangEditor from 'wangeditor';

const editorContainer = ref(null);
let editorInstance = null;
// 定义一个prop来接收courseBase.course_intro
const props = defineProps({
  courseIntro: String
});
// 定义一个emits对象来声明要触发的事件
const emit = defineEmits(['update:intro']);

onMounted(() => {
  // 创建编辑器实例
  editorInstance = new WangEditor(editorContainer.value);
  editorInstance.create();
  // 设置编辑器高度
  editorInstance.config.height = 1000; // 设置为您需要的高度

// 设置编辑器的初始内容
  if (props.courseIntro) {
    editorInstance.txt.html(props.courseIntro);
  }

  // 可以在这里设置编辑器的配置项
  // editorInstance.config.menus = [...];

  // 监听编辑器的内容变化事件
  editorInstance.config.onchange = (newHtml) => {
    // 触发事件并将新的内容作为参数传递
    emit('update:intro', newHtml);
  };
});

// 监听courseIntro的变化，实时更新编辑器内容
watch(() => props.courseIntro, (newVal) => {
  if (editorInstance && newVal) {
    editorInstance.txt.html(newVal);
  }
});
onUnmounted(() => {
  // 销毁编辑器实例
  if (editorInstance) {
    editorInstance.destroy();
  }
});
</script>
<style scoped>

</style>